<template>
    <el-table :data="payroll" height="400" style="max-width: 100%; "
        :header-cell-style="{ background: ' #2c3e50', textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column fixed prop="employee_id" label="员工编号" width="150" />
        <el-table-column prop="employee_name" label="员工名字" width="150" />
        <el-table-column prop="base_salary" label="基础工资" width="150" />
        <el-table-column prop="bonus" label="奖金" width="150" />
        <el-table-column prop="deductions" label="扣款" width="150" />
        <el-table-column prop="total_salary" label="总薪资" width="150" />
        <el-table-column label="薪资发放日期" width="150">
            <template #default="{ row }">
                <area>{{ dateFormatter(row.salary_date) }}</area>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="编辑" width="150">
            <template #default="scope">
                <!-- <el-button link type="primary" size="small" @click="editpayroll(scope.row)">查看</el-button> -->
                <el-button link type="primary" size="small" @click="deletepayroll(scope.row.salary_id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


</template>
<script setup lang="ts">
import { defineProps, watch, defineEmits } from 'vue'
import { deleteData, updateData } from "../../../api/api"
const props = defineProps({
    payroll: {
        type: Array,
        default: () => []
    }
})
const emit = defineEmits<{ (event: string, value: object): void }>()
// //删除员工
const deletepayroll = async (id: string) => {
    const res = await deleteData(`/payroll/${id}`, {});
    console.log(res);

    if (res.message != "薪资记录删除成功") return
    emit("refreshPage", {})

}
//编辑员工
import useAccountStore from "../../../store/account";
const accountStore = useAccountStore()

const editpayroll = async (id: object, type: string) => {
    // emit("editpayroll", payroll)
    const userMsg: any = accountStore.userMsg;
    if (!userMsg) {
        alert('身份验证已过期，请重新登录');
        return;
    }
    const res = await updateData(`/payroll/${id}`, { payroll_approved_by: userMsg.employee_id, type: type });
    if (res.message != "更新成功") return
    emit("refreshPage", {})
}
// 格式化日期的函数
const dateFormatter = (cellValue: string) => {
    if (!cellValue) return "";
    const date = new Date(cellValue);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    return `${year}-${month}-${day}`;
}

</script>
<style scoped lang="scss">
.el-table {
    max-width: 100%;
}
</style>